<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<%@ include file="/WEB-INF/views/include/head.jsp"%>
<link rel="stylesheet" href="${ctxStatic}/css/list.css">
<script type="text/javascript">

 $(function(){
    $("#stop2").prop("checked",true);
    $("input[name='embroideryItemList']").each(function(i,e){
        
        if($(e).prop("checked")){
            $("#stop1").prop("checked",true);
        }
    });
     if($("#stop2").prop("checked")){
    	 $("#show").hide();
    } 
}); 
// 下拉框信息信息查询
function selectAcc(id){
    
    strs=id.split("-"); 
    var cd=strs[0];
    var id=strs[1];
    id=cd+id;
    
    if($("#"+id).prop("disabled")){
           
           $("#"+id).removeAttr("disabled");
           var param={"code":strs[1]};
           $.post("${ctx}/style/mystyle/formtwotoptwo",param,function(result){
               var html="<option value=''><spring:message code="order_please_choose"/></option>";
               $.each(result,function(i,e){
                   html+="<option value='"+e.styleOption.itemCd+"-"+e.styleOption.itemValue+"'>"+e.styleOption.itemNameCn+"</option>";
               });
               $("#"+id).html(html);
           },'json');
           var name = $("#"+id).parent().parent().find("p").text();
           $("#"+id).attr("data-rule-required","true");
           $("#"+id).attr("data-msg-required","请选择"+name);
           changeTitleInfo();
           
    }else{
            $("#"+id).attr("disabled","disabled");
            $("#"+id).attr("data-rule-required","false");
            $("#"+id).attr("data-msg-required","");
           changeTitleInfo();
           var html="<option value=''><spring:message code="order_please_choose"/></option>";
           $("#"+id).html(html);
    }
}


// id 隐藏范围 flag=1 展示 2隐藏
function showOrHide(id,flag){

    if(flag==1){
        
        $("#"+id).show();
    }else{
        
        $("#"+id).hide();
    }
    
}


/*下一步*/
var saveForm={
    s:null,
    save:function(s){
            this.s=s;
            //if (!validate()){
               // return;
            //}
            $("#inputForm").validate({
                submitHandler : function() {
                    var params = $("#inputForm").serialize();
                    $.post("${ctx}/order/createOrder3/saveOrderToSession6", params, function(result) {
                        
                        // 有错误
                        if (result == "false") {
                            $("#inputForm")[0].reset();
                        }
                         // 跳转至第二页面
                        else {
                            window.location.href="${ctx}/order/createOrder3/form7?id=0";
                        }
                    }, 'json');
                }
            });
            
            $("#inputForm").validate({});
            $("#inputForm").submit(); 
    }
    }
    
/*下拉框信息信息查询*/
function selectAcc2(id){
    var oldId = id;
    strs=id.split("-"); 
    var cd=strs[0];
    var id=strs[1];
    id=cd+id;

    var param={"code":strs[1]};
    $.post("${ctx}/style/mystyle/formtwotoptwo",param,function(result){
    	   // 下拉选框
            var html = "<select name='embroideryOptionList' disabled class='form-control sexLg' id='" + id +"' onchange='changeTitleInfo()'>";
                html += "    <option value=''><spring:message code="order_please_choose"/></option>";
                html+="</select>";
                $("#"+id + "C").html(html);
        
            // input
            var html = "<input id='" + id +"'  maxlength='20' disabled name='embroideryOptionList'  onblur='changeTitleInfo()'  class='form-control sexLg'>";
            $("#"+id + "CI").html(html);
            
            $.each(result,function(i,e){
                html+="        <option value='"+e.styleOption.itemCd+"-"+e.styleOption.itemValue+"'>"+e.styleOption.itemNameCn+"</option>";
            });
            html += "</select>";
   
            var idCK = id + "CK";
            var html2 = '<input type="checkbox" name="embroideryItemList" value="' + oldId + '"  onclick="selectAcc(\'' + oldId + '\' )">';
            $("#"+ idCK).html(html2);
            $("#" + oldId).val(null);
            changeTitleInfo();

    },'json');
}


/*入力是否合法*/
function validate() {
    
    // checkBox
    var cb = $("input[name='embroideryItemList']");
    // option
    var op = $("select[name='embroideryOptionList']");
    
    for (var i = 0 ; i < cb.length; i ++) {
        // 加值，减值只能入力其中一个数据
        if (cb[i].checked) {
            if(op[i].value == null || $.trim(op[i].value) == "" || op[i].value == "null") {
                // 请选择相应选项
                layer.msg('<spring:message code="order_please_choose_option_item"/>', {time:1000}); 
                return false;
            }
           
        }
    }
   return true;
}


/*标题*/
function changeTitleInfo() {

    var params = $("#inputForm").serialize();

    $.post("${ctx}/order/createOrder/titleShow2?typeFlag=6&&id=0", params, function(result) {
    
        var h = $(callBackHtml(result)).find("#title").html();
        $('#title').html(h);
        var windowH2 = window.parent.windowHIframe;
        $('.TxtInfoSm1,.scrollBox').css('height', windowH2 - 368);
    }, 'html');

}

</script>
</head>
<body>
    <div class="myshop">
        <!-- 创建订单 -->
        <p class="myshoptop"><spring:message code="order_create_order"/></p>
    </div>
        <div class="myshop_middle_order">
        <!-- 标题 -->
        <div class="orderTit orderTitShow clearfix">
             <div class="titSm off">
                <!-- 基本信息 -->
                <p><spring:message code="order_basic_info"/></p>
                <img src="${ctxStatic}/images/order_01_off.png">
            </div>
            <div class="titSm off" onclick='window.location.href="${ctx}/order/createOrder2/initUpdateOrder2?id=${order.id}"'>
                <!-- 量体信息 -->
                <p><spring:message code="order_fit_property_info"/></p>
                <img src="${ctxStatic}/images/order_02_off.png">
            </div>
            <div class="titSm off" onclick='window.location.href="${ctx}/order/createOrder3/form3?id=${order.id}"'>
                <!-- 款式定制 -->
                <p><spring:message code="order_style_customization"/></p>
                <img src="${ctxStatic}/images/order_03_off.png">
            </div>
            <div class="titSm off" onclick='window.location.href="${ctx}/order/createOrder3/form4?id=${order.id}"'>
                <!-- 辅料 -->
                <p><spring:message code="order_accessory"/></p>
                <img src="${ctxStatic}/images/order_04_off.png">
            </div>
            <div class="titSm off" onclick='window.location.href="${ctx}/order/createOrder3/form5?id=${order.id}"'>
                <!-- 配料 -->
                <p><spring:message code="order_burdening"/></p>
                <img src="${ctxStatic}/images/order_05_off.png">
            </div>
            <div class="titSm off" onclick='window.location.href="${ctx}/order/createOrder3/form6?id=${order.id}"'>
                <!-- 刺绣 -->
                <p><spring:message code="order_embroidery"/></p>
                <img src="${ctxStatic}/images/order_06_off.png" onclick='window.location.href="${ctx}/order/createOrder3/form6?id=0"'>
            </div>
            <div class="titSm off" onclick='window.location.href="${ctx}/order/createOrder3/form7?id=${order.id}"'>
                <!-- 标牌 -->
                <p><spring:message code="order_brand"/></p>
                <img src="${ctxStatic}/images/order_07_on.png">
            </div>
            <div class="titSm off" onclick='window.location.href="${ctx}/order/createOrder3/form8?id=${order.id}"'>
                <!-- 售价 -->
                <p><spring:message code="order_sales_price"/></p>
                <img src="${ctxStatic}/images/order_08_on.png">
            </div>
        </div>

        <form id="inputForm">
            <div class="top_first clearfix">
                <div class="contentBox cnBx">
                    <!-- 刺绣 -->
                    <p class="contentTit cnBy"><spring:message code="order_embroidery"/></p>
                            <div class="formBox scrollBox">
                                <div class="clearfix">
                                    <div class="ch_middle fl">
                                        <!-- 刺绣 -->
                                        <p class="data_92"><spring:message code="order_embroidery"/></p>
                                        <div class="data_lf fl">
                                            <label class="lbst1"><input class="rast1"  id="stop1"  name="stop1" type="radio" onclick="showOrHide('show',1)">需要</label>
                                            <label class="lbst1"> <input class="rast1"id="stop2" name="stop1" type="radio" onclick="showOrHide('show',2)">不需要 </label>
                                        </div>
                                    </div>
                                </div>
                                <input name="id" type="hidden" value="0"/>
                                <div id="show">
                                    <c:forEach items="${embroideryList}" var="item" varStatus="status">
                                        <c:set var="inputFlag" scope="page" value="0"></c:set>
                                        <!-- 折行开始 -->
                                        <c:if test="${status.index%2 == 0}">
                                            <div class="data clearfix">
                                        </c:if>
                                        <!-- 右数据 -->
                                        <c:if test="${status.index%2 == 0}">
                                            <div class="ch_middle fl">
                                        </c:if>
                                        <!-- 左数据 -->
                                        <c:if test="${status.index%2 == 1}">
                                            <div class="ch_middle fr">
                                        </c:if>
                                        
                                                <c:forEach items="${ShowOptionList}" var="itemShow" varStatus="itemStatus">
                                                    <c:if test="${item.styleOption.itemCd == itemShow.itemCD}">
                                                        <c:set var="inputFlag" scope="page" value="1"></c:set>
                                                        <c:set value="${itemShow.itemValue}"  var="itemShowCd"/>
                                                        <c:set value="${itemShow.optionValue}"  var="itemShowoptionValue"/>
                                                        <div class="ckBox1 fl" id="${item.styleOption.itemCd}${item.styleOption.itemValue}CK">
                                                            <input type="checkbox" checked name="embroideryItemList" value="${item.styleOption.itemCd}-${item.styleOption.itemValue}" onclick="selectAcc2('${item.styleOption.itemCd}-${item.styleOption.itemValue}')">
                                                        </div>
                                                        <div class="fl clearfix orderSelectBox notpointer">
                                                            <p class="rtname data_id">${item.styleOption.itemNameCn}</p>
                                                        </div>
                                                        <div class="slev1"  >
                                                               <c:set value="<%=ResourcesUtil.getConfig(\"top4textFlag\")%>" var="top4textFlag" />
                                                               <c:choose>
                                                                <c:when test="${item.styleOption.textFlag eq top4textFlag}">
                                                                   
                                                                    <!--刺绣内容显示text框-->
                                                                      <div id="${item.styleOption.itemCd}${item.styleOption.itemValue}CI">
                                                                        <input id="${item.styleOption.itemCd}${item.styleOption.itemValue}"  maxlength="20" onblur="changeTitleInfo()"  name="embroideryOptionList" value="${itemShow.optionValue}" class="form-control sexLg">
                                                                      </div>
                                                                </c:when>
                                                                <c:otherwise>
                                                                    <!--  -->
                                                                <div id="${item.styleOption.itemCd}${item.styleOption.itemValue}C">
                                                                    <select name="embroideryOptionList"  class="form-control sexLg" onchange="changeTitleInfo()">
                                                                        <c:forEach items="${fns:getDesignOptionList(itemShow.itemValue)}" var="designOption">
                                                                            <option value="${designOption.itemCD}-${designOption.itemValue}"  
                                                                             <c:if test="${designOption.itemCD eq itemShowCd && designOption.itemValue eq itemShowoptionValue}"  >
                                                                                selected=selected
                                                                            </c:if> >
                                                                                ${designOption.itemName}
                                                                            </option>
                                                                        </c:forEach>
                                                                    </select>
                                                                </div>
                                                                </c:otherwise>
                                                            </c:choose>
                                                        </div>
                                                    </c:if>
                                                </c:forEach>
                                                
                                                <!-- 如果之前没被显示过 -->
                                                <c:if test='${pageScope.inputFlag == "0"}'>
                                                    <div class="ckBox1 fl">
                                                        <input type="checkbox" name="embroideryItemList" value="${item.styleOption.itemCd}-${item.styleOption.itemValue}" onclick="selectAcc('${item.styleOption.itemCd}-${item.styleOption.itemValue}')">
                                                    </div>
                                                    <div class="fl clearfix orderSelectBox notpointer">
                                                        <p class="rtname data_id">${item.styleOption.itemNameCn}</p>
                                                       </div>
                                                    <div class="slev1">
                                                            <c:set value="<%=ResourcesUtil.getConfig(\"top4textFlag\")%>" var="top4textFlag" />
                                                           <c:choose>
                                                            <c:when test="${item.styleOption.textFlag eq top4textFlag}">
                                                                <!--刺绣内容显示text框-->
                                                                  <input id="${item.styleOption.itemCd}${item.styleOption.itemValue}" disabled name="embroideryOptionList" value="" class="form-control sexLg" onblur="changeTitleInfo()">
                                                            </c:when>
                                                            <c:otherwise>
                                                                <select onchange="changeTitleInfo()" name="embroideryOptionList" disabled class="form-control sexLg" id="${item.styleOption.itemCd}${item.styleOption.itemValue}" >
                                                                    <option value=""><spring:message code="order_please_choose"/></option>
                                                                </select>
                                                            </c:otherwise>
                                                        </c:choose>
                                                </div>
                                                </c:if>
                                            </div>
                                    <c:if test="${status.index%2 == 1 || status.index == (fn:length(embroideryList)-1)}">
                                        </div>
                                    </c:if>
                                </c:forEach>
                            </div>
                    
                    </div>
                </div>
            </form>


        <!-- 订单信息显示 -->
        <%@ include file="/WEB-INF/views/modules/order/orderCreateTitle.jsp"%>

        </div>



        <div class="Pre-box">
            <!-- 上一步 -->
            <div class="Pre-1" onclick='window.location.href="${ctx}/order/createOrder3/form5?id=0"'><spring:message code="order_back_step"/></div>
            <!-- 取消 -->
            <div class="Pre-2" onclick="window.parent.frames[0].location.href = '${ctx}/order/order/'"><spring:message code="order_cancel"/></div>
            <!-- 下一步 -->
            <div class="Pre-1" onclick="saveForm.save(0);"><spring:message code="order_next_step"/></div>
        </div>
    </div>
    <script>
    var windowH2 = window.parent.windowHIframe;
    $('.TxtInfoSm1,.scrollBox').css('height', windowH2 - 368);
    var listH = $(':root').css('height');
    $(window.parent.$("#mainFrame").css('height',listH));
</script>
</body>
</html>